{% load static %}

{% load i18n %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="{% static 'bootstrap.min.css' %}">
    <script src="{% static 'jquery-3.7.0.min.js' %}"></script>

    {% block head %}
        {% block title %}<title></title>{% endblock %}
    {% endblock %}

    <style>
        header {
            background-color: #fff;
        }

        .our-main-class {
            overflow-y: auto; /* 当内容超出 main 的高度时显示滚动条 */
            scrollbar-width: none; /* 隐藏 Firefox 浏览器的滚动条 */
            -ms-overflow-style: none; /* 隐藏 IE/Edge 浏览器的滚动条 */
        }

        main::-webkit-scrollbar {
            display: none; /* 隐藏 Webkit 内核浏览器的滚动条（如 Chrome、Safari）*/
        }
    </style>


</head>
<body>
{#<header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">#}
<header class="navbar navbar-dark sticky-top d-flex flex-wrap justify-content-center py-3 border-bottom">
    <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none">
        <svg class="bi me-2" width="40" height="32">
            <use xlink:href="#bootstrap"/>
        </svg>
        <span class="fs-4">同步客户端</span>
    </a>

    <ul class="nav nav-pills">
        <li class="nav-item" style="margin-right: 20px"><a href="/" class="nav-link"
                                aria-current="page">{% translate '首页' %}</a></li>
        <li class="nav-item" style="margin-right: 20px"><a href="{% url 'sync_web:sync_web_statisics' %}" class="nav-link"
                                aria-current="page">{% translate '数据统计' %}</a></li>
{#        <li class="nav-item"><a href="#" class="nav-link">{% translate '配置同步信息' %}</a></li>#}

    </ul>
</header>

<div class="container-fluid">
    <div class="row">
        <main class="col">
            {% block content %} {% endblock %}

        </main>
    </div>
</div>


{% block boby %}
{% endblock %}

<script src="{% static 'bootstrap.bundle.min.js' %}"></script>

<script src="{% static 'dashboard.js' %}"></script>

<script>
    $(document).ready(function () {
        var url = window.location.pathname;
        $('#sidebarMenu a[href="' + url + '"]').addClass('active');
    });

</script>

<script>

    {#console.log($(".header"))#}

    $(".navbar>ul>li>a").each(function () {

        if (location.href.indexOf(this.href) === 0) {
            // console.log($(this));
            $(this).addClass('active')
            // $(this).addClass('active')  // 不变色
        }
    })


</script>

{% block script %}{% endblock %}
</body>
</html>